import { FC, useState, ChangeEvent } from 'react';
import { useDispatch } from 'umi';

const Form: FC = () => {
  const [value, setValue] = useState<string>('');
  const dispatch = useDispatch();

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    setValue(e.target.value);
  };

  const add = (): void => {
    dispatch({
      type: 'index/add',
      value,
    });
    setValue('');
  };

  return (
    <>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={add}>添加</button>
    </>
  );
};

export default Form;
